import React, { useState, useCallback, useEffect } from "react";
import { Table, Tag, Space, Button, Popconfirm, Image } from "antd";
import { SettingOutlined, RestOutlined } from "@ant-design/icons";
import "./index.css";
import EditModal from "./EditModal"

interface IUser {
    userData: any[];
    pageInfo: any;
    onPageChange: Function;
    onRemove: Function;
    onEdit: Function;
    cancelModalVisible: boolean;
}
const url: string = "https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/Videonumber/"

const MediaTable: React.FC<IUser> = ({
    userData,
    pageInfo,
    onPageChange,
    onRemove,
    onEdit,
    cancelModalVisible
}): React.ReactElement => {
    const columns = [
        {
            title: "编号",
            dataIndex: "vidID",
            key: "vidID",
            sorter: (a: any, b: any) => a.vidID - b.vidID,
        },
        {
            title: "文案",
            dataIndex: "message",
            key: "message",
            render: (message: string) => <p className="message_text">{message}</p>,
        },
        {
            title: "地址",
            dataIndex: "address",
            key: "address",
            render: (item: any) => (
                item === '' ? <Tag color="purple">暂无</Tag> : item
            )
        },
        {
            title: "分类标签",
            dataIndex: "type",
            key: "type",
        },
        {
            title: "媒体类型",
            dataIndex: "MediaType",
            key: "MediaType",
            filterSearch: true,
            filters: [
                {
                    text: "视频",
                    value: "视频",
                },
                {
                    text: "图片",
                    value: "图片",
                },
            ],
            onFilter: (value: any, record: any) => record.MediaType.includes(value),
            render: (t: string) => (
                <>
                    {t === "视频" ? (
                        <Tag color="magenta">{t}</Tag>
                    ) : (
                        <Tag color="cyan">{t}</Tag>
                    )}
                </>
            ),
        },
        {
            title: "发布者",
            dataIndex: "userName",
            key: "userName",
        },
        {
            title: "发布日期",
            dataIndex: "date",
            key: "date",
        },
        {
            title: "操作",
            key: "action",
            render: (record: any) => (
                <Space size="middle">
                    <Button
                        type="primary"
                        icon={<SettingOutlined />}
                        size="large"
                        onClick={(e) => { openModal(record) }}
                    ></Button>
                    <Popconfirm
                        onConfirm={(e) => doRemove(record.vidID)}
                        title="确认删除吗？"
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button
                            type="primary"
                            danger
                            icon={<RestOutlined />}
                            size="large"
                        ></Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    const [isEditModelValid, setIsEditModelValid] = useState(false);

    const [itemData, setItemData] = useState({});

    useEffect(() => {
        setIsEditModelValid(false);
    }, [cancelModalVisible])

    const doRemove = (id: number): void => {
        onRemove(id);
    };



    const handleTableChange = (pagination: any) => {
        onPageChange({
            page_num: pagination.current,
            page_size: parseInt(pagination.pageSize),
        });
    };
    const openModal = useCallback((item: any) => {
        setIsEditModelValid(true);
        setItemData({
            vidID: item.vidID,
            userName: item.userName,
            MediaType: item.MediaType,
            address: item.address,
            message: item.message,
            type: item.type,
        });
    }, [])

    const cancelEditModal = useCallback((val: boolean) => {
        setIsEditModelValid(val);
    }, []);

    return (
        <div className="media_table">
            <Table
                pagination={{
                    current: pageInfo.page_num,
                    pageSize: pageInfo.page_size,
                    total: pageInfo.total,
                    showTotal: (total) => `总共 ${total} 条数据 当前页码 ${pageInfo.page_num} `,
                }}
                onChange={handleTableChange}
                columns={columns}
                rowKey={(columns) => columns.vidID}
                expandable={{
                    expandedRowRender: record => (
                        <>
                            {

                                record.MediaType === '视频' ?
                                    (
                                        <div className="video_box">
                                            <video autoPlay muted controls src={url + record.Media}></video>
                                        </div>
                                    ) :
                                    (
                                        <div className="images">
                                            {
                                                record.Imagelist.map((tag: any, index: number) => {
                                                    return (
                                                        <div className="img_list" key={index}>
                                                            <Image

                                                                width={200}
                                                                src={url + tag}
                                                            />
                                                        </div>
                                                    );
                                                })

                                            }

                                        </div>

                                    )
                            }
                        </>

                    )
                }}
                dataSource={userData}
            />

            <EditModal
                itemData={itemData}
                isEditModelValid={isEditModelValid}
                cancelEditModal={cancelEditModal}
                onEditInfo={onEdit}
            />
        </div >
    );
};

export default MediaTable;
